/* Floating map popover — single source of truth.

   Shared between the bio root (inlined at build time by
   build.py:_read_map_popover_assets()) and any raw HTML page that links
   this file directly (test page, future authored pages). The companion
   map-popover.js auto-injects the #map-popover element on DOMContentLoaded
   and wires every .map-trigger span to a Leaflet preview centred on its
   data-lat / data-lon.

   Three dismiss modes, toggled per host page (or per show() call):
     - default — peek mode: fades in, holds ~2 s, fades out. Clicks pass
       through the empty area (pointer-events: none on the container).
     - persistent — set <body data-map-popover-persistent>: stays open
       until dismissed. An X button, click outside the card, and Escape
       all close it. The container catches clicks (pointer-events: auto)
       so the outside-click works.
     - manual — show-prop dismiss:'manual': the CALLER hides it (hover-
       follow popovers); the card itself goes pointer-transparent so it
       never steals the mouse from the element being hovered.

   Armored per the css-leak-defense rule: every property the host page
   might set (color, font-family, line-height, font-size, font-weight,
   text-align, background) is locked here so the popover renders
   identically wherever it appears. */

.map-trigger { cursor: pointer; }
.map-trigger:hover { text-decoration: underline; }

/* Light/dark via light-dark() on each colour below, driven by the inherited
   `color-scheme` (base.css sets it on :root and the manual theme toggle forces
   it). The popover reads no var(--*) from the host, but it does inherit
   color-scheme, so it follows the site-wide theme choice. Hosts that don't load
   base.css get color-scheme's default (OS-following). Only the card chrome
   (background, label bar, close button) flips; the OSM tiles stay light. */

#map-popover {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  color: light-dark(#222, #e0e0e0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

#map-popover .map-popover-card {
  position: relative;
  pointer-events: auto;
  /* Width is the popover's only knob — override per page via the CSS
     custom property (the test-page size tester does this to preview
     different sizes). Default cap is 360 px; otherwise allow up to 90%
     of the smaller viewport dimension so the popover can fill a phone. */
  width: var(--map-popover-card-width, min(90vw, 90vh, 360px));
  background: light-dark(#fff, #1a1a1a);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: light-dark(0 8px 32px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 0, 0, 0.5));
}

/* Renderer mounts — each registered renderer owns ONE root element inside
   .map-popover-content (the shell display-toggles them when switching).
   #map-popover-map is the built-in leaflet-point renderer's mount;
   .map-popover-route is the flight-route renderer's (map-route.js). Both share
   the square footprint + the circle/square shape clip. */

#map-popover-map,
.map-popover-route {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  /* Default shape: circle. Override per page via
     <body data-map-popover-shape="square">, per call via the shape show
     prop, or live via window.mapPopover.setShape(). */
  border-radius: 50%;
}

#map-popover.shape-square #map-popover-map,
#map-popover.shape-square .map-popover-route {
  /* Rounded-square mode: the map fills the card; corner-clipping comes
     from the card's own border-radius (10 px — the original design from
     before the popover went circular). No radius on the map itself. */
  border-radius: 0;
}

.map-popover-route {
  /* Whisper-grey plate behind the route canvas. The Hǎo world drawing is
     vase-shaped on a TRANSPARENT canvas, so without a fill the circle clip
     has nothing to cut and the round display area silently vanishes into the
     card. A barely-there neutral — an inset tone, not a colour — keeps the
     porthole legible while staying far too faint to fight the card. NOT ocean
     blue (implies sea beyond the map's edge) and NOT the engine's mercVoid
     slate (reads heavy against the card) — both tried and rejected. Dark
     value: a step lighter than the card's #1a1a1a, same whisper weight. */
  background: light-dark(#eef1f4, #242a30);
}

.map-popover-route canvas { display: block; }

/* Manual (hover-follow) dismiss: the popover is pure display — the card
   must never intercept the pointer, or hovering near it would fire
   mouseleave on the trigger → hide → mouseenter → flicker. */
#map-popover.dismiss-manual .map-popover-card { pointer-events: none; }

/* Opt-in placement: <body data-map-popover-placement="bottom-right"> (or
   the placement show prop) parks the card in the lower-right corner —
   the itinerary calendar's hover mini-map spot. Default stays centered
   (existing pages untouched). The container is inset: 0, so flex-end on
   both axes + padding gives the 24 px corner margin. */
#map-popover.place-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px;
}

#map-popover-label {
  padding: 0.55rem 1rem;
  text-align: center;
  color: light-dark(#222, #e0e0e0);
  font-weight: 500;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  border-top: 1px solid light-dark(#eee, #2e2e2e);
  background: light-dark(#fafafa, #141414);
}

#map-popover .map-popover-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: light-dark(rgba(255, 255, 255, 0.92), rgba(20, 20, 20, 0.92));
  border: none;
  border-radius: 50%;
  color: light-dark(#555, #ccc);
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: light-dark(0 1px 4px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.4));
}

#map-popover.is-persistent .map-popover-close { display: flex; }

#map-popover .map-popover-close:hover {
  color: light-dark(#000, #fff);
  background: light-dark(#fff, #1a1a1a);
}

/* Light/dark now expressed inline via light-dark() on each rule above; it
   follows the inherited `color-scheme` (set on :root by base.css), so the
   popover flips with the manual theme toggle instead of only the OS. */